<!-- 所有class名字的相对意思
boss1:最大div
video:视频的div
pic:4张图的div
chanpin:稻香村产品动画div
dz：动画的字体的div
dzp：动画的字体的p标签
cpc:稻香村产品图片div
bigc:稻香村产品图片div下方大div
:poster="bannerImg":视频封面
autoplay：自动播放
loop：循环播放
-->

<template>
  <div>
    <div class="video">
        <!-- poster:封面 -->
        <video
          src="../../assets/img_index/zysp.mp4"
          width="100%"
          height="100%"
          :poster="bannerImg"
          autoplay
          loop
        ></video>
      </div>
    <div class="boss1">
      <!-- 视频 -->
      
      <!-- 荣誉和年代 -->
      <div class="pic">
        <ul class="t1">
          <li>
            <img src="../../assets/img_index/r1.png" alt="" />
            <p>始于1773年【乾隆三十八年】</p>
          </li>
          <li>
            <img src="../../assets/img_index/r2.png" alt="" />
            <p>国家首批认定的【中华老字号】</p>
          </li>
          <li>
            <img src="../../assets/img_index/r3.png" alt="" />
            <p>稻香村苏式月饼制作技艺【江苏省级非物质文化遗产】</p>
          </li>
          <li>
            <img src="../../assets/img_index/r4.png" alt="" />
            <p>全国拥有专营专卖店【800多家】</p>
          </li>
        </ul>
        <img class="p1" src="../../assets/img_index/1.jpg" alt="" />
      </div>
      <!-- 稻香村产品动画 -->
      <!-- <div class="chanpin"> -->
        <!-- 稻香村产品图片 -->
        <div class="cpc">
          <img src="../../assets/img_index/dong0.png" alt="" />
        </div>
        <!-- 动画部分 -->
        <!-- <div class="bigc"> -->
          <el-carousel class="bigc1" :interval="2000" type="card" height="400px">
            <el-carousel-item>
              <img
                class="bigc0"
                src="../../assets/img_index/dong1.jpg"
                alt=""
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                class="bigc0"
                src="../../assets/img_index/dong2.jpg"
                alt=""
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                class="bigc0"
                src="../../assets/img_index/dong3.jpg"
                alt=""
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                class="bigc0"
                src="../../assets/img_index/dong4.jpg"
                alt=""
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                class="bigc0"
                src="../../assets/img_index/dong5.jpg"
                alt=""
              />
            </el-carousel-item>
            <el-carousel-item>
              <img
                class="bigc0"
                src="../../assets/img_index/dong6.jpg"
                alt=""
              />
            </el-carousel-item>
          </el-carousel>
        <!-- </div> -->
        <div class="cpxq">
          <ul class="ul">
            <li class="d1">
              <img class="h1" src="../../assets/img_index/dong1.jpg" alt="" />
              <div class="dz">
                <p class="dzp1">
                  传统工艺，花式酥皮，皮馅分明，内陷以精选优质红枣为基料而制成，入口诉讼软细，枣香...
                </p>
              </div>
            </li>
            <li class="d1">
              <img class="h1" src="../../assets/img_index/dong2.jpg" alt="" />
              <div class="dz">
                <p class="dzp1">
                  稻香村集团鸡蛋卷，秉承传统工艺，奶香浓郁，白痴原本的色泽与风味。醇香松软酥脆可口...
                </p>
              </div>
            </li>
            <li class="d1">
              <img class="h1" src="../../assets/img_index/dong3.jpg" alt="" />
              <div class="dz">
                <p class="dzp1">
                  稻香村集团苏式玫瑰月饼，沿用百年苏式糕点传统工艺，已被列入非物质文化遗产名录。精...
                </p>
              </div>
            </li>
            <li class="d1">
              <img class="h1" src="../../assets/img_index/dong4.jpg" alt="" />
              <div class="dz">
                <p class="dzp1">
                  新鲜的鸡蛋，配上甜滑营养的天然蜂蜜与蜜枣，丝丝柔滑，枣香浓郁，口感细腻，回味绵甜...
                </p>
              </div>
            </li>
            <li class="d1">
              <img class="h1" src="../../assets/img_index/dong5.jpg" alt="" />
              <div class="dz">
                <p class="dzp1">
                  精选优质果实，采用先进工艺制作，拒绝过度加工和添加，还原果实原香。稻香村集团夏威....
                </p>
              </div>
            </li>
            <li class="d1">
              <img class="h1" src="../../assets/img_index/dong6.jpg" alt="" />
              <div class="dz">
                <p class="dzp1">
                  稻香私房速冻水饺精选优质食材，熬制骨汤美味鲜香。
                </p>
              </div>
            </li>
          </ul>
        </div>
      <!-- </div> -->
      <!-- 稻香村产品详情 -->
    </div>
  </div>
</template>

<script>
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.boss1 {
  width: 1200px;
  margin: 0 auto;
  background-color: #fcf9f2;
  // position: relative;
}
.video {
  object-fit: fill; //撑满全屏
}
.pic {
  width: 100%;
  // margin: 20px 0px 0px 290px;
  // background-image: '../../assets/img_index/1.jpg';
}
.t1 {
  margin-top: 30px;
  margin-left: -300px;
  width: 1200px;
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  // margin: 0 auto;
  margin-left: 9px;
  position: absolute;
  // right: -180px;
  z-index: 2;
}
.p1 {
  width: 100%;
  height: 500px;
  margin-left: -10px;
  margin-top: 50px;
  // position: absolute;
  // top: -10px;
  // left:-20px;
  z-index: 1;
}
p {
  font-size: 14px;
  width: 238px;
  margin-top: 23px;
}
.h1 {
  width: 140px;
  height: 140px;
}
.cpxq {
  width: 1200px;
  // background-color: red;
  // margin-left: 450px;
  margin-top: 80px;
  // margin-top: 0px;
  // background-color: #f9f4e4;
  > .ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-left: 110px;
    margin-bottom: 30px;
    > .d1 {
      width: 45%;
      display: flex;
      padding-right: 50px;
      > .dz {
        padding-left: 30px;
        padding-bottom: 50px;
      }
    }
  }
}
.dzp1 {
  color: #b78439;
  margin-top: 40px;
}
</style>
